<template>
  <div v-loading="loading">
    <el-button 
      class="style-btn"
      @click="changeStyle" 
      type="primary">
      {{horizontal?'纵向显示':'横向显示'}}
    </el-button>
    <OrgTree 
      :data="data" 
      :props="props" 
      :labelWidth="labelWidth"
      :collapsable="true"
      :horizontal="horizontal"
      :renderContent="render"
      @on-expand="expandClick"/>
  </div>
</template>
<script>
import OrgTree from 'vue2-org-tree'
import OrgTreeItem from './OrgTree'
import req from '../request'
export default {
  name:'org-tree',
  components:{
    OrgTree,
    OrgTreeItem
  },
  data(){
    return {
      labelWidth:120,
      loading:false,
      horizontal:true,
      data:{
        id:1,
        ename:'',
        cname:'',
        img:'',
        icon:'',
        expand:true,
        jobId:'',
        orgCode:''
      },
      props:	{label: 'cname', children: 'children', expand: 'expand'}
    }
  },
  mounted(){
    this.getOrgTree();
  },
  methods:{
    async getOrgTree(){
      this.loading = true
      try {
        let url = '/myehr/org/searchTreeData.action?formId=2545&treeSolutionId=32&swaggerUserCode=sysadmin'
        let res = await req.get(url);
        let extendTree = function(node){
          if(node.children && node.children.length > 0){
            node.children.forEach(item => {
              item.expand = false
              // return {
              //   id:item.EMPVORGANIZATIONA_ID,
              //   ename:item.EMPVORGANIZATIONA_ENAME,
              //   cname:item.RENYUANTONGQI_ENAME,
              //   img:item.EMPVORGANIZATIONA_IMAGE,
              //   icon:item.icon,
              //   expand:true,
              //   jobId:item.EMPVORGANIZATIONA_JOBID,
              //   orgCode:item.EMPVORGANIZATIONA_ORGCODE,
              // }
              extendTree(item)
            })
          }
          // node.expand = true
          // else{
          //   node.expand = false;
          // }
          return node
        }
        console.log(res);
        res.expand = true
        this.data = extendTree(res)
        
      } catch (error) {
        
      }
      this.loading = false;
    },
    async getOrgData(){
      this.loading = true;
      try {
        // let qstr = encodeURIComponent('formId=5165&params={}');
        // let list = await req.get('/myehr/form/queryTreeSolution.action?formId=5165&params={}');
        let res = await req.get('/myehr/org/searchTreeData.action?formId=2545&treeSolutionId=32&swaggerUserCode=sysadmin');
        // res = JSON.parse(res)
        // console.log(res);
        // if(res.loginTimeOut){
        //   this.$confirm('请先登陆','提示',{type:'warning'})
        //   return;
        // }
        let roots = [];
        let children = {};
        list.forEach(item => {
          let pId = item.EMPVORGANIZATIONA_PARENTID;
          item.expand = true;
          let isParent = item.isParent;
          let newItem = {
            id:item.EMPVORGANIZATIONA_ID,
            ename:item.EMPVORGANIZATIONA_ENAME,
            cname:item.EMPVORGANIZATIONA_cname,
            img:item.EMPVORGANIZATIONA_IMAGE,
            icon:item.icon,
            expand:true,
            jobId:item.EMPVORGANIZATIONA_JOBID,
            orgCode:item.EMPVORGANIZATIONA_ORGCODE,
            pId
          };
          if(!pId){
            roots.push(newItem);
          }else{
            if(children[pId]){
              children[pId].push(newItem);
            }else{
              children[pId] = [newItem];
            }
          }
        });
        let getNodeChildren = function(pId){
          let c = children[pId]
          if(c){
              c.map(item => {
                  let subs = getNodeChildren(item.id)
                  item.expand = false;
                  item.children = subs;
                  return item;
              })
          }
          return c
        }
        let nodeData = {...roots[0]};
        nodeData.children = getNodeChildren(nodeData.id); 
        console.log(nodeData);
        this.data = nodeData;
      } catch (error) {
        console.error(error);
        
        this.$message.error(error);
      }
      this.loading = false;
    },

    changeStyle(){
      this.horizontal = !this.horizontal;
    },
    render(h,data){
      let vm = this;
      return h('div',
      {
        class:'org-tree-item',
        on:{
          click:function(){
            console.log(data);
            let {RENYUANTONGQI_ID,RENYUANTONGQI_ORG_CODE,RENYUANTONGQI_CNAME} = data;
            vm.$confirm({RENYUANTONGQI_ID,RENYUANTONGQI_ORG_CODE,RENYUANTONGQI_CNAME},'点击事件',{type:'info'})
          }
        }
      },
      [
        h('a',{
          attrs:{
            href:`${data.RENYUANTONGQI_ID}`
          }
        },`id：${data.RENYUANTONGQI_ID}`),
        h('div',`组织编码：${data.RENYUANTONGQI_ORG_CODE}`),
        h('div',`组织名称：${data.RENYUANTONGQI_CNAME}`),
        h('div',`人数：${data.children?data.children.length:0}`),
        h('div',`组织简称：${data.RENYUANTONGQI_CNAME}`),
        h('div',`组织类型：${data.RENYUANTONGQI_CNAME}`),
        h('div',`组织级别：${data.RENYUANTONGQI_XTYPE}`),
        // h('div',{
        //   attrs:{
        //     class:'img-container'
        //   }
        // },[
        //   h('img',{
        //     directives:[
        //       {
        //         name:'lazy',
        //         value:data.img
        //       }
        //     ],
        //     attrs:{
        //       class:'img-width'
        //     }
        //   })
        // ])
      ])
    },
    expandClick(node){
      node.expand = !node.expand;
    }
  }
}
</script>
<style lang="less">
.style-btn{
  position: fixed;
  top: 10px;
  left: 210px;
  z-index: 100;
}
.org-tree-item{
  text-align: left;
  font-size: 12px;
  line-height: 20px;
  .img-container{
    width: 120px;
    height: 120px;
    line-height: 120px;
    border: 1px solid #dcdcdc;

    text-align: center;
    .img-width{
      max-height: 100%;
      max-width: 100%;
      vertical-align: middle;
    }
  }
}
</style>
